<template>
  <div class="risk-statistics">
    <span class="title">当日预警时长</span>
    <div class="content">
      <el-row style="width:100%;margin:25px 0"
              type="flex"
              justify="space-between">
        <el-col :span="8"
                class="img-center">
          <div>
            <img src="@/assets/platformDetail/opt/icon_time.png"
                 class="img" />
          </div>
          <div class="warning-item-num">总预警时长(h)</div>
        </el-col>
        <el-col :span="8">
          <div class="warning-detail-box">
            <span class="tip">照度</span>
            <span class="num">{{alertTime.OPT_LUX}}</span>
          </div>
          <div class="warning-detail-box">
            <span class="tip">EML</span>
            <span class="num">{{alertTime.EML}}</span>
          </div>
          <div class="warning-detail-box">
            <span class="tip">CS</span>
            <span class="num">{{alertTime.CS}}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="warning-detail-box">
            <span class="tip">Ra</span>
            <span class="num">{{alertTime.RA}}</span>
          </div>
          <div class="warning-detail-box">
            <span class="tip">EDI</span>
            <span class="num">{{alertTime.EDI}}</span>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getStatisticWeek } from "@/api/platformManage";
export default {
  name: "riskStatistics",
  components: {},
  props: {
    platformId: String
  },
  data() {
    return {
      alertNum: {
        OPT_LUX: 0,
        RA: 0,
        EML: 0,
        EDI: 0,
        CS: 0
      },
      alertTime: {
        OPT_LUX: 0,
        RA: 0,
        EML: 0,
        EDI: 0,
        CS: 0
      },
      totalAlert: 0
    };
  },
  watch: {
    platformId() {
      this.getAlertNumFun();
    }
  },
  mounted() {
  },
  methods: {
    //获取平台预警数量
    getAlertNumFun() {
      getStatisticWeek(this.platformId).then(res => {
        this.totalAlert = res.value.totalAlertDeviceNum;
        let data = res.value.dataTypeEvaluateStatistics;
        for (let i = 0; i < data.length; i++) {
          this.alertNum[data[i].type] = data[i].alertDeviceNum;
          let durationSeconds = data[i].alertDurationSeconds / 3600000;
          if (durationSeconds == 0) {
            this.alertTime[data[i].type] = durationSeconds;
          } else {
            this.alertTime[data[i].type] = durationSeconds.toFixed(2);
          }
        }
      });
    }
  }
};
</script>
<style scoped lang="scss">
.risk-statistics {
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
  height: 190px;
  .title {
    font-size: 16px;
    font-weight: bold;
    line-height: 21px;
    color: #0a0a0a;
  }

  .img-center {
    text-align: center;
    margin-right: 10px;
  }
  .warning-num {
    width: 58px;
    height: 44px;
    font-size: 36px;
    font-family: DIN;
    font-weight: bold;
    line-height: 44px;
    color: #fc360d;
    opacity: 1;
  }
  .warning-item-num {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 19px;
    color: #1a1a1a;
    opacity: 1;
  }
  .warning-detail-box {
    .tip {
      font-size: 14px;
      min-width: 40px;
      display: inline-block;
      font-family: Microsoft YaHei;
      font-weight: bold;
      line-height: 19px;
      color: #707070;
    }
    .num {
      font-size: 16px;
      font-family: DIN;
      font-weight: bold;
      line-height: 27px;
      color: #242424;
    }
  }
}
@media screen and (max-width: 1670px) {
  .risk-statistics {
    .content {
      display: flex;
      align-items: center;
      .text {
        font-size: 16px;
        font-weight: 400;
        line-height: 21px;
        color: #535353;
        margin-right: 20px;
      }
    }
  }
}
@media screen and (max-width: 1440px) {
  .risk-statistics {
    .alert-title {
      font-size: 14px !important;
    }
    .img {
      width: 100%;
    }
    .warning-detail-box {
      .tip {
        display: inline-block;
        min-width: 30px;
        font-size: 12px;
        font-family: Microsoft YaHei;
        line-height: 19px;
        color: #707070;
      }
      .num {
        font-size: 14px;
        font-family: DIN;
        line-height: 27px;
        color: #242424;
      }
    }
  }
}
</style>
